<template>
  <div class="body">
    <catshit-header></catshit-header>
    <div class="main">
      <div style="margin: 20px">
        <el-input style="width: 80%;margin-right: 30px" suffix-icon="el-icon-search" v-model="filmName"></el-input>
        <el-button @click="searchByName">搜 索</el-button>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="搜明星" name="filmtab">
          <film-list :film-list="listByName"></film-list>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>

<script>
import CatshitHeader from "../../components/CatshitHeader";
import FilmList from "../../components/FilmList";

export default {
  name: "Search",
  components: {CatshitHeader, FilmList},
  data() {
    return {
      /*当前点亮的tab名称*/
      activeName: 'filmtab',
      /*搜索关键词*/
      filmName: '',
      /*对明星搜索出的列表*/
      listByStar: [],
      /*对电影名字搜索出的列表*/
      listByName: [],
    }
  },
  created() {
    this.filmName = this.$route.query.filmName;
  },
  watch: {
    $route (to, from) {
      this.$router.go(0)
    }
  },
  mounted() {
      this.$axios.post('search',{queryString:this.filmName}).then(res=>{
        if(res.data.code){
          this.$message.error('出错了')
          return
        }
        this.listByName=res.data.msg
      })
  },
  methods: {
    searchByName() {
      // this.$router.push({path: '/viewMovie/Search', query: {"filmName": this.filmName}})//结果页结果
      this.$axios.post('search',{queryString:this.filmName}).then(res=>{
        if(res.data.code){
          this.$message.error('出错了')
          return
        }
        this.listByName=res.data.msg
      })
    }
  }
}
</script>

<style scoped>
.body {
  display: flex;
  background-color: aliceblue;
  text-align: left;
  justify-content: center;
}

.main {
  margin-top: 80px;
  width: 70%;
}
</style>
